<template>
  <div>{{ currentUnit }}-{{ isDown }}</div>
  <div>
    <MoveAnimation :is-down="isDown" v-if="!isShowNoticeAnimation && isShowedInitAni" />
    <NoticeAnimation
      :is-down="isDown"
      :is-unit-init="isUnitInit"
      v-if="isShowNoticeAnimation || !isUnitInit"
      ref="noticeAnimation"
    />
  </div>
</template>
<script setup>
import { ref } from 'vue'
import MoveAnimation from './moveAnimation.vue'
import NoticeAnimation from './noticeAnimation.vue'
import { computed } from 'vue'
import { watch } from 'vue'
import { useTemplateRef } from 'vue'
const props = defineProps({
  currentUnit: {
    type: String,
    default: '',
  },

  isUnitInit: {
    type: Boolean,
    default: false,
  },
})

defineExpose({
  startNoticeAnimation,
})

const noticeAnimation = useTemplateRef('noticeAnimation')

// 显示提示动画
function startNoticeAnimation() {
  if (isShowNoticeAnimation.value || !props.isUnitInit) {
    noticeAnimation.value.startAnimation()
  } else {
    // 展示移动动画组件
    isShowNoticeAnimation.value = true
  }
}

// 展示提示动画
const isShowNoticeAnimation = ref(true)

const isShowedInitAni = ref(false)

watch(
  () => props.currentUnit,
  (newVal, oldValue) => {
    console.log('currentUnit', newVal, oldValue)
    if (newVal) {
      isShowedInitAni.value = true
      isShowNoticeAnimation.value = false
    }
  },
)

const isDown = computed(() => {
  return props.currentUnit === 'DOWN'
})
</script>
<style scoped lang="less"></style>
